<template>
    <div class="Dialog" ref='showPanelDislogList' :style="{height:DialogH - data.TopBarH - data.bottomH +'px'}">
        <div class="top">
            <p class="titleBig">当前播放</p>
            <ul class="floatViewClear">
                <li class="left ">总共两首</li>
                <li class="right flexView">
                    <div>
                        <span class="iconfont ">&#xe632;</span>
                        <span>收藏全部</span>
                    </div>
                    <span class="clearAll">
                        清空列表
                    </span>
                </li>
            </ul>
        </div>
        <ul class="list">
            <li class="flexView">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span class="iconfont" v-show="bf.bf" :class="{bfStyle:bf.bf==true}">&#xe87a;</span>
                        <span class="iconfont"  v-show="!bf.bf" :class="{bfStyle:bf.bf==true}">&#xe87c;</span>
                    </div>
                    <span class="singerName" :class="{bfStyle:bf.bf==true}">同渡</span>
                    <span class="introduce">（电影《侍神令》推广曲）</span>
                    <span class="SQ-grad">SQ</span>
                </div>
                <div class="list-right">
                    <span class="singer" :class="{bfStyle:bf.bf==true}">金玟岐金玟岐金玟岐金玟岐金玟岐金玟岐</span>
                    <span  class="iconfont titleMin-h">&#xf010b;</span>
                    <span class="time">02.21</span>
                </div>
            </li>
            <li class="flexView">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span class="iconfont" v-show="bf.bf" :class="{bfStyle:bf.bf==true}">&#xe87a;</span>
                        <span class="iconfont"  v-show="!bf.bf" :class="{bfStyle:bf.bf==true}">&#xe87c;</span>
                    </div>
                    <span class="singerName" :class="{bfStyle:bf.bf==true}">同渡</span>
                    <span class="introduce">（电影《侍神令》推广曲）</span>
                    <span class="SQ-grad">SQ</span>
                </div>
                <div class="list-right">
                    <span class="singer" :class="{bfStyle:bf.bf==true}">金玟岐金玟岐金玟岐金玟岐金玟岐金玟岐</span>
                    <span  class="iconfont titleMin-h">&#xf010b;</span>
                    <span class="time">02.21</span>
                </div>
            </li>
            <li class="flexView">
                <div class="list-left" >
                    <div class="bf-box" >
                        <span class="iconfont" v-show="bf.bf" :class="{bfStyle:bf.bf==true}">&#xe87a;</span>
                        <span class="iconfont"  v-show="!bf.bf" :class="{bfStyle:bf.bf==true}">&#xe87c;</span>
                    </div>
                    <span class="singerName" :class="{bfStyle:bf.bf==true}">同渡同渡同渡</span>
                    <span class="introduce">（电影《侍神令》推广曲）</span>
                    <div class="grad">
                        <span class="SQ-grad">SQ</span>
                    <span class="SQ-grad">MV</span>
                    <span class="SQ-grad">VIP</span>
                    </div>
                </div>
                <div class="list-right">
                    <span class="singer" :class="{bfStyle:bf.bf==true}">金玟岐金玟岐金玟岐金玟岐金玟岐金玟岐</span>
                    <span  class="iconfont titleMin-h">&#xf010b;</span>
                    <span class="time">02.21</span>
                </div>
            </li>     
        </ul> 
    </div>
</template>
<script>
import Char from './slotChar.vue'
export default {
   data() {
    return {
        DialogH:document.documentElement.clientHeight,
        bf:{
            index:1,
            bf:true
        },
        
    }
   },
   props:{
     data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
      watch:{

   },
   components:{Char},

   mounted(){
        window.onresize=()=>{
            this.DialogH = document.documentElement.clientHeight;
        }
         this.$emit("dislogListSoon",this.$refs.showPanelDislogList)
   },
   methods:{
    show(){
        this.$emit("dislogScSoon", !this.data[0])

    },
    //按新建 关闭收藏弹窗 修改父级组件打开新建弹窗
    fund(){
        this.$emit('fund',true)
        this.$emit("dislogScSoon", !this.data[0])
    }
   }
   
}
</script>
<style lang="less" scoped>
    .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon5/iconfont.ttf?t=1660989543054') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
}
.Dialog{
    z-index: 999;
    box-shadow: 0px 0px 7px rgb(0 0 0 / 9%) ;
   
    background: white;
    // border-radius: 20px;
    width: 530px;


   position:fixed;
//    top: 50%;
    right: 0px;
    // transform: translate(-50%,-50%);

   span[name='title']{
    font-size: 20px;
    font-weight: 800;
     color: black;
   }

  .top{
    padding: 20px 22px;
   
    ul{
         margin: 10px 0;
        .left{
            float: left;
             font-size: 15px;
            color: #CCCCCC;
        }
        .right{
            float: right;
            .clearAll{
                margin-left: 15px;
                color: #507DAF;
            }
            div>span{
                margin-left: 5px;  

            }
            span{
                font-size: 18px;
                color: #333333;
                cursor: pointer;
            }
        }
    }
  }
  .list{
    li{
        height: 45px;
        width: 100%;
        box-sizing: border-box;
        .bfStyle{
            color: #EC4141 !important;
        }
        .list-left{
            width: 60%;
            // border: 1px solid red;
            display: flex;
            align-items: center;
            overflow: hidden;
            // justify-content: center;
            .bf-box{
                width: 28px;
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                span{
                    font-size: 12px;
                }
            }
            .introduce{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 0;
                flex-grow: 1;
            }
            .grad{
                // flex-grow: 1;
                overflow: hidden;
                display: flex;
            }
            .SQ-grad{
            margin-left: 4px;
            display: inline-block;
            border: solid 1px #EC4141;
            padding: 0 -1px;
            color: #EC4141;
            line-height: 15px;
            font-weight: 400;
            border-radius: 3px;
            font-size: 15px !important;
            cursor: pointer;
            
        }
        }
        .list-right{
            display: flex;
            width: 40%;
            // border: 1px solid red;
              overflow: hidden;
            margin-left: 10px;
            span:first-child{
                display: block;
                width: 50%;
                 overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .time{
                margin-left: 15px;
            }
            .titleMin-h{
                    font-size: 19px;
                    color: #CCCCCC;
            }
        }
        span{
            font-size: 14px;
            color: #CCCCCC;
        }
        .singerName{
             font-size: 15px;
             color: #333333;
              white-space: nowrap;
        }
    }
    li:hover{
        background: #F5F5F5;
        .list-right{
            .singer,.time{
                color: #333333;
            }
        }
    }
  }
}
   
</style>